<template>
    <div class="warning-box">
        <title-group icon="icon-xiayu" title="短时降雨" :right_txt="time" :borderBotton="true"></title-group>
        <div class="warning-row">
            <div class="warning-item warning-item-1">
                <p class="warning-row1"><span>0</span>座</p>
                <p  class="warning-row2">水库超讯</p>
            </div>

            <div class="warning-item warning-item-2">
                <p class="warning-row1"><span>0</span>座</p>
                <p  class="warning-row2">河道超警</p>
            </div>
        </div>
    </div>
</template>
<script setup>
import dayjs from 'dayjs'
const time ='更新时间' + dayjs().format('YYYY-MM-DD HH:mm:ss');
</script>

<style scoped lang="less">

.warning-item {
    color: white;
    width: 130px;
    height: 110px;
    border-radius: 5px;
    /* border-radius: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to bottom, #009efa, #8be0ff);
}

.warning-row {
    display: flex;
    justify-content: space-around;
    padding: 30px 0;
}

.warning-item.warning-item-1 {
    background: linear-gradient(to bottom, #009efa, #8be0ff);
}

.warning-item.warning-item-2 {
    background: linear-gradient(to bottom, #3A7DFF, #aec7ff);
}

.warning-box {
    background: white;
    margin-top: 15px;
}

.warning-item p {
    margin: 0;
    font-size: 1.2em;
}

.warning-row1 span {
    font-size: 1.5em;
    padding-right: 5px;
}

.warning-row1 {
    margin-bottom: 4px;
}
</style>